<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        input {
            height: 30px;
            width: 420px;
        }
        button {
            margin-top: 10px;
            padding: 10px 15px;
            /* cursor: not-allowed; */
            cursor: pointer;

        }
    </style>
</head>
<body>

    <div class="form">
       <div><input type="text" placeholder="手机号码"></div>
       <div><button class="btn-send">发送验证码</button></div>
    </div>

    <script>
            // 要求:    
                // 点击按钮 "发送验证码" ,解绑事件, 设置按钮外观(禁止点击)
                // 延迟5秒,重新绑定事件,在延迟期间,设置按钮文本为 "发送中..."


            // 获取按钮
            var btnSend =  document.querySelector(".btn-send");

            // 定义变量 记录延迟函数
            var delay = null;

            // 定义函数,编写事件处理逻辑
            var handle = function(){
                console.log("click");
                // 使用延迟函数,可以先清除延迟函数
                // clearTimeout(delay);
                // 执行延迟函数
                delay = setTimeout(function(){
                    // 延迟结束
                    // 事件绑定
                    btnSend.onclick = handle;
                     // 设置按钮的文本
                    btnSend.innerText = "重新发送验证码";
                    // 设置按钮的外观
                    btnSend.style["cursor"] = "pointer";
                    // 设置按钮使用的状态
                    btnSend.removeAttribute("disabled");

                },3 * 1000);
                // 解绑事件
                btnSend.onclick = null;
                // 设置按钮的文本
                btnSend.innerText = "发送中...";
                // 设置按钮的外观
                btnSend.style["cursor"] = "not-allowed";
                // 设置按钮被禁用的状态
                btnSend.setAttribute("disabled",true);
            }

            // 事件绑定
            btnSend.onclick = handle;




    </script>
</body>
</html>